<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
	<head th:replace="admin/bcommon :: head(~{:: title})">
		<title>博客发布</title>
	</head>

	<body>

		<!-- 导航 -->
		<nav th:replace="admin/bcommon :: menu(1)"></nav>

		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a th:href="@{/admin/blogs/input}" class="teal active item">发布</a>
					<a th:href="@{/admin/blogs}"  class="item">列表</a>
				</div>
			</div>
		</div>
		
		
		<!-- 中间内容 -->
		<div class="m-container m-padded-tb-big">
			<div class="ui container">
				<form  id="blog-form" action="#"  th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
					<input type="hidden" name="published">
					<input type="hidden" name="id" th:value="*{id}">

					<div class="required field">
						<div class="ui left labeled input">
							<div class="ui teal basic selection compact dropdown label">
								<input type="hidden" value="原创" name="flag" th:value="*{flag}"/>
								<i class="dropdown icon"></i>
								<div class="text">原创</div>
								<div class="menu">
									<div class="item" data-value="原创">原创</div>
									<div class="item" data-value="转载">转载</div>
									<div class="item" data-value="翻译">翻译</div>
								</div>
							</div>
							<input type="text" name="title" placeholder="标题" th:value="*{title}"/>
						</div>
					</div>
					
					<!-- 集成markdown编辑器 -->
					<div class="required field">
						<div id="md-content" style="z-index: 1 !important">
							<textarea placeholder="博客内容" name="content" style="display: none;" th:text="*{content}">

							</textarea>
						</div>						
					</div>
					
					<div class="two fields">
						<div class="required field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">分类</label>
								<div class="ui fluid selection dropdown">
									<input type="hidden" name="type.id" th:value="*{type}!= null ? *{type.id}"/>
									<i class="dropdown icon"></i>
									<div class="default text">分类</div>
									<div class="menu">
										<div th:each="type : ${types}" class="item" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
									</div>
								</div>
							</div>
						</div>
						<div class="required field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">标签</label>
								<div class="ui fluid selection multiple search dropdown">
									<input type="hidden" name="tagIds" th:value="*{tagIds}"/>
									<i class="dropdown icon"></i>
									<div class="default text">标签</div>
									<div class="menu">
										<div th:each="tag : ${tags}" class="item" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">首图</label>
							<input type="text" name="firstPicture" placeholder="首图引用地址" th:value="*{firstPicture}">
						</div>						
					</div>

					<div class="required field">
						<textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea>
					</div>

					<div class="inline fields">
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="recommend" name="recommend" th:checked="*{recommend}" class="hidden"  />
								<label for="recommend">推荐</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="shareStatement" name="shareStatement" th:checked="*{shareStatement}" class="hidden" />
								<label for="shareStatement">转载声明</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" class="hidden" />
								<label for="appreciation">赞赏</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" id="commentabled" name="commentabled" th:checked="*{commentabled}" class="hidden" />
								<label for="commentabled">评论</label>
							</div>
						</div>
					</div>
					<!-- 表单验证提示消息容器 -->
					<div class="ui error message"></div>
									
					<div class="ui right aligned container">
						<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
						<button type="button" id="save-btn" class="ui secondary button">保存</button>
						<button type="button" id="publish-btn" class="ui teal button">发布</button>
					</div>
					
				</form>
			</div>
		</div>

		<!-- 底部footer -->
		<footer th:replace="admin/bcommon :: footer"></footer>

		<th:block th:replace="admin/bcommon :: script"></th:block>


	<script>
		$('.ui.dropdown').dropdown({
			on: 'hover'
		});

		$('#save-btn').click(function () {
			$('[name="published"]').val(false);
			$('#blog-form').submit();
		})
		$('#publish-btn').click(function () {
			$('[name="published"]').val(true);
			$('#blog-form').submit();
		})
		// 表单验证
		$('.ui.form').form({
			fields: {
				title: {
					identifier:'title',
					rules: [{
						type: 'empty',
						prompt: '标题:请输入博客标题'
					}]				
				},
				content: {
					identifier:'content',
					rules: [{
						type: 'empty',
						prompt: '标题:请输入博客内容'
					}]
				},
				typeId: {
					identifier:'typeId',
					rules: [{
						type: 'empty',
						prompt: '标题:请输入博客分类'
					}]
				},
				firstPicture: {
					identifier:'firstPicture',
					rules: [{
						type: 'empty',
						prompt: '标题:请输入博客首图'
					}]
				},
				description: {
					identifier:'description',
					rules: [{
						type: 'empty',
						prompt: '标题:请输入博客描述'
					}]
				},
			}
		});
		
	</script>
	
	<!-- markdown集成初始化 -->
	<script type="text/javascript" th:inline="javascript">
		var contentEditor;
		$(function() {
			contentEditor = editormd("md-content", {
				width   : "100%",
				height  : 640,
				syncScrolling : "single",
				path    : [[@{/plugins/editor/lib/}]]
			});
		});
	</script>

	</body>
</html>